<template>
  <!-- import uploadFile from '@/components/upload/index.vue'  -->
  <!-- 租箱发布/回调发布 img/ 公司信息-->
  <el-upload :disabled="disabledUpload" v-model:file-list="urlListShow" action="#" :multiple="multiple" :class="{disabled:disabledUpload}" list-type="picture-card" :on-change="loadJsonFromFile"
    :on-remove="handleRemove" :on-preview="handlePictureCardPreview" :auto-upload="false" :limit="maxLimit" :on-exceed="onExceed">
    <el-icon>
      <Plus />
    </el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible" style="width: 1100px;">
    <img w-full :src="dialogImageUrl" alt="Preview Image"  style="width:100%"/>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
// import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import { uploadFile } from '@/api/system/upload'
import { ElMessage, UploadProps, type UploadFile, type UploadInstance } from 'element-plus'
const emit = defineEmits(['uploadSccess', 'uploadRemoveSccess'])
const props = defineProps({
  urlList: {
    type: Array,
    default: () => {
      return []
    }
  },
   multiple:{
    type: Boolean,
    default: false
  },
  maxLimit: {
    type: Number,
    default: 6
  },
  disabledUpload: {
    type: Boolean,
    default: false
  },
  type: { // 0：主图 1：详情描述图
    type: String,
    default: 0
  },
  index: {
    type: Number,
    default: 0
  }
})

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const uploadFiles = ref([])
let resultList = reactive([])
let urlListShow = ref(props.urlList) || []

watch(() => props.urlList, (val) => {
  urlListShow.value = val || []
})

const beforeAvatarUpload = (rawFile: any) => {
  // console.log(rawFile)
  let list = ['image/jpeg', 'image/jpg', 'image/png']
  const isAccess = list.includes(rawFile.raw.type);
  const isLt3M = rawFile.size / 1024 / 1024 < 3;
  if (!isAccess) {
    ElMessage.error('上传图片只能是 JPG/PNG 格式!');
    return false
  }
  if (!isLt3M) {
    ElMessage.error('上传大小不能超过 3MB!');
    return false
  }
  return true
}
//on-change 上传文件
const loadJsonFromFile = (file: any, fileList: never[]) => { //传参参考element-plus官网 （on-change）
  const result = beforeAvatarUpload(file)
  // 删除上传失败的文件
  if (!result) {
    fileList.splice(-1, 1);
  } else {
    uploadFiles.value = fileList  // 上传成功的 图片list
    submitUpload(file)
  }
}
const onExceed = (files: any, fileList: any) => {
  ElMessage.warning(`最多可上传${props.maxLimit}张`)  
}

//上传文件
const submitUpload = async (file: any) => { // 
  let result: any = {}
  let formData = new FormData()
  console.log('file', file)
  formData.append('file', file?.raw)
  await uploadFile(formData).then((res: any) => {
    result = res.data
    result.uid = file.uid
    result.type = props.type
    result.index = props.index
    console.log('success:上传成功',res)
    emit('uploadSccess', result)
  }).catch((err: any) => {
    console.log('error:上传失败' + err)
    ElMessage.error('上传失败')
    return
  })
  return result
}

//删除文件
const handleRemove = (file: UploadFile,fileList: never[]) => { // 传参参考element-plus官网 （on-remove）
  // console.log('file111:',file,fileList)
  emit('uploadRemoveSccess', file)
}


const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

// const handleDownload = (file: UploadFile) => {
//   console.log(file)
// }

defineExpose({
  resultList,
  submitUpload,
  urlListShow,
  uploadFiles
})
</script>
<style scoped>
.el-upload--picture-card {
  --el-upload-picture-card-size: 80px
}

#diy_size {
  width: 80px;
  height: 80px;
}
.disabled >>> .el-upload--picture-card{
  display: none;
}
</style>
